<template>
  <div ref="charts" class="charts">
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      echartsData: []
    }
  },
  async mounted () {
    const { data: res } = await this.$http.get('/resident/getCharts?community=' + '南布社区')
    // console.log(res)
    this.echartsData = res.data.countByState

    var mycharts = echarts.init(this.$refs.charts)
    // console.log(mycharts)
    mycharts.setOption({
      title: {
        text: '南布社区居民健康状态',
        // subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '健康状态',
          type: 'pie',
          radius: '70%',
          data: this.echartsData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }
}
</script>

<style lang='less' scoped>
.charts{
  width: 100%;
  height: 100%;
}
</style>
